<template>
    <div class="home">
        <v-Head></v-Head>
        <!-- 头部走马灯开始 -->
        <div class="Scroll">
            <span>
                <i class="fa fa-volume-up"></i>
                最新公共
            </span>
            <div>
                <el-carousel height="120px" direction="vertical" :autoplay="true">
                    <el-carousel-item v-for="(item, index) in scrollData" :key="index">
                        <span>{{ item.title }}</span>
                        <span>{{ item.content }}</span>
                        <span>{{ item.createtime.split("T")[0] }}
                            {{ item.createtime.split("T")[1].split(".")[0] }}</span>
                        <span @click="linkMore">更多</span>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>

        <div class="Main">
            <!-- 计数模块 -->
            <div class="f4">
                <div>
                    <i aria-hidden="true" class="fa fa-user" style="font-size: 66px; color: rgb(56, 154, 249);"></i>
                    <b>{{ dem1 }}</b>
                    <p>系统用户数</p>
                </div>
                <div>
                    <i aria-hidden="true" class="fa fa-file-text-o" style="font-size: 66px; color: rgb(174, 232, 106);"></i>
                    <b>{{ dem2 }}</b>
                    <p>计费订单数量</p>
                </div>
                <div>
                    <i aria-hidden="true" class="fa fa-car" style="font-size: 66px; color: rgb(242, 185, 14);"></i>
                    <b>{{ dem3 }}</b>
                    <p>车位总量</p>
                </div>
                <div>
                    <i aria-hidden="true" class="fa fa-pencil-square-o"
                        style="font-size: 66px; color: rgb(178, 139, 124);"></i>
                    <b>{{ dem4 }}</b>
                    <p>用户反馈数量</p>
                </div>
            </div>
        </div>
        <div class="Echarts">
            <div>
                <user></user>
            </div>
            <div>
                <car></car>
            </div>
            <div>
                <radar></radar>
            </div>
        </div>
        <div class="EchartsS">
            <div style="width: 72%;">
                <brokenLine></brokenLine>
            </div>
            <div style="width: 26%;">
                <el-table :data="tableData" style="width: 100%;" :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }">
                    <el-table-column prop="repaircontent" label="维修内容" width="110"
                        :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="createtime" label="报修时间" width="140"
                        :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="resultstatus" label="状态" width="60">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>状态 {{ scope.row.resultstatus }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">
                                        <span
                                            style="height: 60%; color: rgb(126, 185, 130); border-color: rgba(186, 255, 151, 0.37); font-size: 12px; background-color: rgba(186, 255, 151, 0.37);"
                                            v-show="scope.row.resultstatus == '1'">已修复</span>
                                        <span
                                            style="height: 60%; color: rgb(223, 143, 42); border-color: rgba(255, 208, 156, 0.43); background-color: rgba(255, 208, 156, 0.43);"
                                            v-show="scope.row.resultstatus != '1'">待处理</span>
                                    </el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page-sync="page" :page-sizes="[4]" :page-size="rows" layout="total, sizes, prev, pager, next"
                    :total="tableDatas">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import vHead from "../components/header";
import user from "@/components/echarts/user";
import car from "@/components/echarts/car";
import radar from "@/components/echarts/radar";
import brokenLine from "@/components/echarts/brokenLine";
export default {
    name: "index",
    components: {
        vHead,
        user,
        car,
        radar,
        brokenLine,
    },
    data() {
        return {
            // 获取走马灯数据
            scrollData: [],
            queryInfo: {
                currPage: 0,
                pageNum: 10,
            },
            //计算模块数据
            dem1: 0,
            dem2: 0,
            dem3: 0,
            dem4: 0,
            tableData: [],
            tableDatas: 0,
            page: 0,
            rows: 4,
        };
    },
    methods: {
        async getScroll() {
            let resScroll = await this.$axios({
                url: "/poster/getPosterData",
                method: "get",
                params: this.queryInfo,
            });
            //   console.log(resScroll);
            this.scrollData = resScroll.data.data;
            //   console.log(this.scrollData);
        },
        // 更多跳转页面
        linkMore() {
            this.$router.push("/service/postMessage");
        },
        // 系统用户数
        users() {
            this.$axios
                .get("/users/getUsersData", {
                    params: {
                        currPage: 0,
                        pageNum: 10,
                    },
                })
                .then((res) => {
                    // console.log(res);
                    this.dem1 = res.data.total;
                });
        }, // 计费订单数量
        single() {
            this.$axios
                .get("cost/getPayMessage", {
                    params: {
                        currPage: 0,
                        pageNum: 10,
                    },
                })
                .then((res) => {
                    // console.log(res);
                    this.dem2 = res.data.total;
                });
        }, // 车位总量
        car() {
            this.$axios
                .get("/parking/getParkOrder", {
                    params: {
                        currPage: 0,
                        pageNum: 4,
                    },
                })
                .then((res) => {
                    // console.log(res);
                    this.dem3 = res.data.total;
                });
        },
        feed() {
            this.$axios
                .get("/poster/getFeedBack", {
                    params: {
                        currPage: 0,
                        pageNum: 4,
                    },
                })
                .then((res) => {
                    // console.log(res);
                    this.dem4 = res.data.total;
                });
        },
        //table表格
        GitList() {
            this.$axios
                .get("/poster/getRepairData", {
                    params: {
                        currPage: this.page,
                        pageNum: this.rows,
                    },
                })
                .then((res) => {
                    //   console.log(res);
                    this.tableDatas = res.data.total;
                    this.tableData = res.data.data;
                    for (let i = 0; i < res.data.data.length; i++) {
                        let t1 = res.data.data[i].createtime.split("T");
                        let t2 = t1[1].split(".");
                        t2 = t2[0].split(":");
                        t2[0] = parseInt(t2[0]);
                        t2[0] = t2[0] + 8;
                        t2[0] = String(t2[0]);
                        t2 = t2[0] + ":" + t2[1] + ":" + t2[2];
                        res.data.data[i].createtime = t1[0] + " " + t2;
                    }
                    //   console.log(this.repaircontent);
                });
        },
        handleSizeChange(val) {
            this.rows = val;
            this.GitList();
            //   console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page = val - 1;
            this.currPage += 1;
            this.GitList();
            //   console.log(`当前页: ${val}`);
        },
        quarters() {
            this.$axios
                .get("/house/searchList", {
                    params: {
                        unitname: "A",
                        currPage: 1,
                        pageNum: 4,
                    },
                })
                .then((res) => {

                    this.labList = res.data.total;
                    parseInt(this.labList);

                });
        },
    },
    mounted() {
        this.getScroll();
        this.users();
        this.single();
        this.car();
        this.feed();
        this.quarters();
        this.GitList();
    },
};
</script>
<style lang="scss" scoped>
// Echarts图标样式
.Echarts {
    //   position: absolute;
    width: 98.6%;
    height: 350px;
    margin-top: 145px;
    margin-left: 1%;
    margin-right: 1%;
    display: flex;
    justify-content: space-between;
}

.EchartsS {
    //   position: absolute;
    //   width: 98.6%;
    //   height: 350px;
    margin-top: 20px;
    margin-left: 1%;
    margin-right: 1%;
    display: flex;
    justify-content: space-between;
}

.EchartsS>div {
    box-sizing: border-box;
    width: 80%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin: 0 10px 0 10px;
    padding-top: 10px;
    background-color: white;
}

.Echarts>div {
    box-sizing: border-box;
    width: 80%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin: 0 10px 0 10px;
    padding-top: 10px;
    background-color: white;
}

.home {
    background-color: #f0f0f0;
    width: 100%;
    //   height: 836px;
}

// 技术模块样式
.f4 {
    position: absolute;
    width: 98.6%;
    height: 130px;
    margin-top: 20px;
    margin-left: 1%;
    margin-right: 1%;
    display: flex;
    justify-content: space-between;
}

.f4>div {
    box-sizing: border-box;
    width: 80%;
    height: 110px;
    padding-left: 6px;
    padding-right: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin: 0 10px 0 10px;
    background-color: white;
    position: relative;
}

.f4>div>p {
    font-size: 14px;
    position: absolute;
    bottom: 25px;
    right: 85px;
}

.f4>div>b {
    font-size: 32px;
    position: absolute;
    top: 21px;
    right: 115px;
}

.f4>div:nth-child(3) b {
    right: 70px;
}

.f4>div:last-child b {
    right: 150px;
}

.f4>div>i {
    position: absolute;
    top: 22px;
    left: 50px;
}

// 走马灯样式
.Scroll {
    background-color: white;
}

.Scroll>div {
    margin-left: 70px;
}

.Scroll>span {
    font-weight: 700;
    color: #4995f7;
    position: absolute;
    top: 58px;
    padding: 18px;
    font-size: 14px;
}

.el-carousel__item {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: nowrap;
    flex-direction: row;
    transform: translate(0px, -1045.5px);
    overflow: hidden;
}

.el-carousel__item span {
    //   color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    //   margin: 0;
    margin-top: -8px;
    font-weight: 700;
}

.el-carousel__item span:last-child {
    color: blue;
    cursor: pointer;
}

::v-deep .el-carousel__indicator--vertical {
    display: none;
}
</style>
